<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>语义元素</title>
	</head>
	<body>
		<!-- <section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。 -->
		<section>
			<h1>WWF</h1>
			<p>The World Wide Fund for Nature (WWF) is....</p>
		</section>

		<!-- <article> 标签定义独立的内容。. -->
		<article>
			<h1>IE 9</h1>
			<p>2011年3月14日21：00发布</p>
		</article>

		<!-- <nav> 标签定义导航链接的部分。 -->
		<nav>
			<a href="#home">主页</a>
			<a href="#about">关于</a>
			<a href="#contact">联系</a>
		</nav>

		<!-- <aside> 标签定义页面主区域内容之外的内容（比如侧边栏）。 -->
		<aside>
			<h4>侧边栏</h4>
			<p>侧边导航栏</p>
		</aside>

    <!-- <header>元素描述了文档的头部区域 -->
    <article>
      <header>
        <h1>文章标题</h1>
        <p>你好，世界！</p>
      </header>
    </header>

      <!-- <footer> 元素描述了文档的底部区域. -->
      <footer>
        <p>版权所有 © 2021</p>
      </footer>

			<!-- <details> 用于创建一个可展开折叠的元件，用户可以从中检索其他附加的信息。 -->
			<details>
				<summary>点击查看更多信息</summary>
				<p>啦啦啦</p>
				<p>略略略</p>
				<p>呃呃呃</p>
			</details>

			<!-- <bid> 允许您设置一段文本，使其脱离其父元素的文本方向设置 -->
				<ul>
					<li>用户：<bdi>hrefs</bdi>：60 分</li>
					<li>用户：<bdi>jdoe</bdi>：80 分</li>
					<li>用户：<bdi>url</bdi>：90 分</li>
				</ul>
	</body>
</html>
